/** 全局SCSS变量 */
:root {
    // 主题背景色
    --main-bg-color: var(--el-color-primary);
    --main-bg-active-color: rgb(255 255 255 / 50%);

    // 主题文字颜色
    --main-text-color: #fff;
    --main-text-active-color: #fff;

    // --menu-background: var(--main-color);
    // --menu-text: var(--el-text-color-primary);
    // --menu-active-text: #fff;
    // --menu-hover: var(--main-active-color);
    --button-hover: rgb(255 255 255 / 50%);
    --body-background: #fff;

    // 菜单颜色
    --el-menu-bg-color: var(--main-bg-color) !important;
    --el-menu-hover-bg-color: var(--main-bg-active-color) !important;
    --el-menu-active-color: var(--main-text-color) !important;
    --el-menu-text-color: var(--main-text-color) !important;
    --el-menu-hover-text-color: var(--main-text-active-color) !important;
}

/** 暗黑主题 */
html.dark {
    --el-color-primary: var(--el-bg-color-overlay);

    // 主题背景色
    --main-bg-color: var(--el-bg-color-overlay);
    --main-bg-active-color: rgb(255 255 255 / 50%);

    // 主题文字颜色
    --main-text-color: #fff;
    --main-text-active-color: #fff;
    --button-hover: rgb(255 255 255 / 50%);
    --body-background: var(--el-bg-color-overlay);

    // 菜单颜色
    --el-menu-bg-color: var(--main-bg-color) !important;
    --el-menu-hover-bg-color: var(--main-bg-active-color) !important;
    --el-menu-active-color: var(--main-text-color) !important;
    --el-menu-text-color: var(--main-text-color) !important;
    --el-menu-hover-text-color: var(--main-text-active-color) !important;
    --el-button-hover-text-color: var(--main-text-active-color) !important;
    --el-button-hover-bg-color: var(--main-bg-active-color) !important;

    // --menu-background: var(--el-bg-color-overlay);
    // --menu-text: #fff;
    // --menu-active-text: var(--el-menu-active-color);
    // --menu-hover: rgb(226 212 212 / 20%);
    --el-text-color-regular: #fff;
    --el-text-color-primary: #fff;

    // --el-color-primary: var(--el-bg-color-overlay);

    // --button-hover: rgb(226 212 212 / 20%);
    // --el-color-primary-light-9: var(--button-hover);

    // .el-drawer__header {
    //   color: #fff;
    // }
    .tags-view-container .tags-view-wrapper .tags-view-item {
        background-color: $menu-background;

        &.active {
            background-color: $menu-hover;
        }
    }

    .settings-button {
        border: 1px solid var(--el-border-color);
        border-right: 0;
    }

    .layout-left {
        .sidebar-container {
            border-right: 1px solid var(--el-border-color);
        }
    }
}
